<template>
  <div>
    <div class="indexUser">
      <div>
        <!-- header  点击 -->
        <headers :userList="userList"></headers>
      </div>
      <div class="bg1 userBox">
        <div class="Order_Details_content wrap bgw">
          <div v-if="state==0" class="state">
            <el-steps :active="state1" align-center>
              <el-step title="拍下商品" description></el-step>
              <el-step title="付款" description></el-step>
              <el-step title="卖家发货" description></el-step>
              <el-step title="确认收货" description></el-step>
              <el-step title="评价" description></el-step>
            </el-steps>
          </div>
          <div v-if="state==1" class="state">
            <el-steps :active="state2" align-center>
              <el-step title="卖家申请退款" description></el-step>
              <el-step title="卖家处理退款申请" description></el-step>
              <el-step title="商家确认退款" description></el-step>
            </el-steps>
          </div>
          <div class="txt">
            <div class="fl order_txt">
              <div>订单信息</div>
              <p class="one">下单时间：{{list.ordertime}}</p>
              <p class="one">订单编号： {{list.out_trade_no}}</p>
              <p v-if="states>0 && !list.paytime" class="one">付款时间：{{list.paytime}}</p>
              <p v-if="states>1 && !list.postno" class="one">发货时间：{{list.sendtime}}</p>
              <p v-if="states>1 && !list.postno" class="one">物流编号：{{list.postno}}</p>
              <p v-if="states>0 && states!=5 && !list.username" class="one">收货人：{{list.username}}</p>
              <p v-if="states>0 && states!=5 && !list.address" class="one">地址： {{list.address}}</p>
              <p v-if="states>0 && states!=5 && !list.mobile" class="one">电话：{{list.mobile}}</p>
            </div>
            <!-- 正常 订单  -->
            <div v-if="state==0" class="fr wuliu">
              <p
                v-for="(v,i) in postList"
                :key="i"
                class="one"
              >{{v.time}} {{v.status}} {{v.context}}</p>
              <p class="one">{{list.ordertime}} 已提交订单，等待系统确认</p>
            </div>
            <!-- 退款退货 -->
            <div v-if="state==1" class="fr">
              <p v-if="states == 6" class="one fn26">商家处理中</p>
              <p v-if="states == 7" class="one fn26">退款完成</p>
              <p v-if="states == 7" class="one fn18">
                退款金额
                <span>{{list.refund_money}}</span>
              </p>
            </div>
          </div>
          <!-- 商品 -->
          <div v-for="(v,i) in goodsList" :key="i" class="goodsBox">
            <div class="goodsTitle">
              <div>商品</div>
              <div>数量</div>
              <div>订单状态</div>
              <div>订单金额</div>
              <div>运费</div>
            </div>
            <div class="goods">
              <div>
                <img :src="v.goods_img" alt />
                <p class="two fr">{{v.goods_name}}</p>
              </div>
              <div>{{v.num}}</div>
              <div>
                {{list.status_cn}}
                <span @click="GoAssess(v)" v-if="states==3">前往评价</span>
                <!-- <span>查看详情</span> -->
              </div>
              <div>¥ {{v.price}}</div>
              <div>
                <div style="margin:auto">${{list.postage}}</div>

                <!-- <span>确认收货</span>
                <span>删除订单</span>-->
              </div>
            </div>
          </div>
          <!-- 价格 -->
          <div class="money">
            <span>优惠：¥ {{list.money_youhui}}</span>
            实付款：
            <span>￥{{list.money}}</span>
          </div>

          <el-dialog title :visible.sync="tab1" width="30%">
            <span>是否取消订单？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="tab1 = false">取 消</el-button>
              <el-button type="primary" @click="cancelOrder()">确 定</el-button>
            </span>
          </el-dialog>

          <el-dialog title :visible.sync="tab2" width="30%">
            <span>是否确认收货？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="tab2 = false">取 消</el-button>
              <el-button type="primary" @click="confirmGoods()">确 定</el-button>
            </span>
          </el-dialog>

          <el-dialog title :visible.sync="tab3" width="30%">
            <span>是否删除订单？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="tab3 = false">取 消</el-button>
              <el-button type="primary" @click="removeOrder()">确 定</el-button>
            </span>
          </el-dialog>

          <div class="bottom">
            <p @click="tab1=true" v-if="states==0">取消订单</p>
            <p @click="GoPay()" v-if="states==0">立即付款</p>
            <p @click="GoReturn()" v-if="states==1 || states==2 ">退款售后</p>
            <p @click="tab2=true" v-if="states==2 ">确认收货</p>
            <p @click="tab3=true" v-if="states== 4 || states== 5 || states== 7 ">删除订单</p>
          </div>
        </div>
      </div>
      <div>
        <publicBottom></publicBottom>
      </div>
    </div>
  </div>
</template>
<script>
import headers from "../header"; // 头部 TOP 和header
import publicBottom from "@/components/public/public_bottom"; //底部

import { usergetinfo } from "@/request/user";
import { getOrderDetails } from "@/request/index"; // 订单详情
import { see_post } from "@/request/index"; //获取 物流 详情
import { confirmGetGoods } from "@/request/index"; //确认收货
import { delete_order } from "@/request/index"; // 删除订单
import { cancel_order } from "@/request/index"; //取消订单

export default {
  components: {
    headers,
    publicBottom
  },
  data() {
    return {
      states: 0, // 订单状态
      state: 0, // 判断是不是 正常 订单 有没有 退款
      state1: 1, // 正常订单
      state2: 1, //退款订单
      ids: "", //订单ID
      list: [], // 订单信息
      goodsList: [], // 商品 信息
      postList: [],
      tab1: false, //取消订单
      tab2: false, //确认收货订单
      tab3: false, //删除订单
      userList: [] // 个人信息
    };
  },
  created() {
    let datas = localStorage.getItem("lzyyToken");
    let Athis = this;
    if (datas != null) {
      this.$tokens = datas;
    } else {
      this.$message.error("登录错误，请重新登录");
      setTimeout(function() {
        Athis.$router.replace({ path: "/land" });
      }, 1000);
    }
    this.ids = this.$route.query.id;
    this.init();
    this.start();
  },
  methods: {
    // 去退款
    GoReturn() {
      this.$router.push({ path: "/user/returnGoods?id=" + this.ids });
    },
    // 去支付
    GoPay() {
      this.$router.replace({
        path: `/pay?money=${this.list.money}&out_trade_no=${this.list.out_trade_no}&pay_type=alipayScan`
      });
    },
    //  取消订单 未支付
    cancelOrder() {
      let Athis = this;
      cancel_order({
        id: this.ids,
        token: this.$tokens
      }).then(res => {
        if (res.code == 1) {
          this.$message({
            message: "取消成功",
            type: "success"
          });
          setTimeout(function() {
            Athis.$emit("removeOrder");
          }, 600);
        }
      });
    },
    // 删除订单
    removeOrder() {
      let Athis = this;
      delete_order({
        id: this.ids,
        token: this.$tokens
      }).then(res => {
        if (res.code == 1) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          setTimeout(function() {
            Athis.$emit("removeOrder");
          }, 600);
        }
      });
    },
    // 前往评价
    GoAssess(v) {
      console.log(v);
      let msg =`/user/OrderAssess?did=${v.did}+&img=${v.goods_img}&name=${v.goods_name}`
     this.$router.push({path:msg})
    },
    // 确认收货
    confirmGoods() {
      confirmGetGoods({
        id: this.ids,
        token: this.$tokens
      }).then(res => {
        if (res.code == 1) {
          this.start();
        }
      });
    },
    // 初始化
    start() {
      getOrderDetails({
        token: this.$tokens,
        id: this.ids
      }).then(res => {
        this.list = res.data.datas;
        console.log(this.list);

        this.goodsList = res.data.datas.orderDetailsList;
        this.states = this.list.status;

        if (this.states > 5) {
          this.state = 1;
          if (this.states == 6) {
            this.state2 = 2;
          } else if (this.states == 7) {
            this.state2 = 3;
          }
        } else {
          if (this.states == 2 || this.states == 3 || this.states == 4) {
            if (this.list.post != "店铺自取") {
            
              see_post({
                token: this.$tokens,
                id: this.ids
              }).then(res => {
                this.postList = res.data.data;
              });
            }
          }
          if (this.states != 5) {
            this.state1 = this.states + 1;
            
          }
        }
      });
    },
    init() {
      //   个人信息
      usergetinfo({
        token: this.$tokens
      }).then(res => {
        this.userList = res.data;
      });
    }
  }
};
</script>

<style lang="less" scoped>
// 订单详情
.Order_Details_content {
  .state {
    padding-top: 40px;
    padding-bottom: 50px;
  }

  .txt {
    overflow: hidden;
    border: 1px solid #e6e6e6;
    display: flex;

    .fl {
      width: 350px;
    }

    .fr {
      width: 850px;
      text-align: left;
      padding-left: 52px;
      padding-top: 32px;
      border-left: 1px solid #e6e6e6;
      font-size: 20px;
      .fn26 {
        font-size: 26px;
      }
      .fn18 {
        font-size: 18px;
        color: #808080;
      }
      span {
        color: #4eeec8;
      }
    }
  }

  .order_txt {
    div {
      width: 350px;
      height: 63px;
      line-height: 63px;
      text-indent: 30px;
      background: rgba(78, 238, 200, 1);
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
    }

    p {
      margin-left: 30px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(128, 128, 128, 1);
      line-height: 40px;
    }
  }

  .goodsBox {
    margin-top: 26px;
    border: 1px solid #e6e6e6;
  }

  .goodsTitle {
    height: 64px;
    background: rgba(247, 247, 247, 1);
    display: flex;
    padding-left: 16px;
    padding-right: 16px;

    > div {
      text-align: center;
      height: 64px;
      line-height: 64px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      width: 15%;
    }

    > div:nth-of-type(1) {
      width: 40%;
    }
  }

  .wuliu {
    p {
      margin-bottom: 20px;
    }
  }

  .goods {
    margin-top: 12px;
    margin-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;

    > div {
      text-align: center;
      height: 114px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(128, 128, 128, 1);
      width: 15%;
      overflow: hidden;
    }

    p {
      display: inline-block;
      width: 300px;
    }

    img {
      width: 140px;
      height: 114px;
    }

    span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(78, 238, 200, 1);
      display: block;
      line-height: 30px;
    }

    > div:nth-of-type(1) {
      text-align: left;
      width: 40%;
    }
  }

  .money {
    text-align: right;
    height: 68px;
    line-height: 68px;
    background: rgba(247, 247, 247, 1);
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(26, 26, 26, 1);
    padding-right: 42px;

    span:nth-of-type(1) {
      color: rgba(128, 128, 128, 1);
    }

    span:nth-of-type(2) {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ff0000;
    }
  }

  .bottom {
    height: 104px;
    text-align: right;
    padding-top: 26px;
    padding-right: 42px;

    p {
      display: inline-block;
      height: 42px;
      line-height: 42px;
      padding-left: 16px;
      padding-right: 16px;
      border: 2px solid rgba(78, 238, 200, 1);
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(78, 238, 200, 1);
      margin-left: 16px;
    }
  }
}
</style>